<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="permissions.pageList"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="60"> </el-table-column>
      <el-table-column prop="name" label="部门" width="200" sortable>
      </el-table-column>
      <el-table-column prop="desc" label="描述" width="100" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="唯一标识" width="300" sortable>
      </el-table-column>
      <el-table-column prop="parent.name" label="父级" width="120" sortable>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button
        type="danger"
        @click="batchRemove"
        :disabled="this.sels.length === 0"
        >批量删除</el-button
      >
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="query.pageSize"
        :total="permissions.count"
        style="float: right"
      >
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import {
  getUserListPage,
  removeUser,
  batchRemoveUser,
  editUser,
  addUser,
} from '../../api/api'

export default {
  data() {
    return {
      filters: {
        name: '',
      },
      permissions: {
				count: 0,
				pageList: []
			},
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列

      query: {
        currentPage: 1,
        pageSize: 10,
        keyword: '',
      },
    }
  },
  methods: {
    search(){
      this.query.currentPage = 1
      this.getPermissions()
    },
    //性别显示转换
    formatSex: function (row, column) {
      return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'
    },
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getPermissions()
    },
    //获取权限列表
    getPermissions() {
      this.$http.post('/permission', this.query).then((res) => {
        res = res.data
        console.log('数据', res.data.pageList)
        if (res.success) {
          this.permissions = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = { id: row.id }
          removeUser(para).then((res) => {
            this.listLoading = false
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.getPermissions()
          })
        })
        .catch(() => {})
    },
    selsChange: function (sels) {
      this.sels = sels
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map((item) => item.id).toString()
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = { ids: ids }
          batchRemoveUser(para).then((res) => {
            this.listLoading = false
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.getPermissions()
          })
        })
        .catch(() => {})
    },
  },
  mounted() {
    this.getPermissions()
  },
}
</script>

<style scoped></style>
